<template>
    <div class="container">
        <!-- 搜索过滤区域 -->
        <el-form :model="form" :inline="true" class="search-form">
            <el-form-item label="跟单编号">
                <el-input v-model="form.followOrderNo" placeholder="请输入跟单编号"></el-input>
            </el-form-item>
            <el-form-item label="物料编码">
                <el-input v-model="form.materialCode" placeholder="请输入物料编码"></el-input>
            </el-form-item>
            <el-form-item label="物料名称">
                <el-input v-model="form.materialName" placeholder="请输入物料名称"></el-input>
            </el-form-item>
            <el-form-item label="日期范围">
                <el-date-picker v-model="form.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>

        <!-- 操作按钮区域 -->
        <div class="action-buttons">
            <el-button type="primary" size="small" @click="queryAll">查询所有</el-button>
            <el-button type="success" size="small" @click="exportData">导出</el-button>
            <el-button type="info" size="small" @click="printData">打印</el-button>
        </div>

        <!-- 数据表格区域 -->
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="tu_status" label="跟单编号" width="120"></el-table-column>
            <el-table-column prop="tu_Remark" label="订单交期" width="120"></el-table-column>
            <el-table-column prop="processSid" label="生产单号" width="120"></el-table-column>
            <el-table-column prop="material_code" label="物料编码" width="120"></el-table-column>
            <el-table-column prop="tu_Name" label="物料名称" width="180"></el-table-column>
            <el-table-column prop="producMaterialPiciName" label="主计量" width="80"></el-table-column>
            <el-table-column prop="production_line" label="生产线" width="120"></el-table-column>
            <el-table-column prop="production_date" label="生产日期" width="150"></el-table-column>
            <el-table-column prop="production_qty" label="生产数量" width="100"></el-table-column>
            <el-table-column prop="processNumber" label="完工数量" width="100"></el-table-column>
            <el-table-column prop="production_qty" label="未完工数量" width="100"></el-table-column>
            <el-table-column prop="processNumber" label="入库数量" width="100"></el-table-column>
        </el-table>

        <!-- 统计信息区域 -->
        <div class="summary-info">
            生产数量: {{ totalProductionQuantity }}
            完工数量: {{ totalCompletedQuantity }}
            未完工数量: {{ totalUncompletedQuantity }}
            入库数量: {{ totalWarehouseQuantity }}
        </div>

        <!-- 分页组件 -->
        <el-pagination :page-size="100" :total="total" :current-page="currentPage" @current-change="handleCurrentChange"
            layout="prev, pager, next"></el-pagination>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted, reactive } from 'vue';

// 表单数据
const form = reactive({
    followOrderNo: '',
    materialCode: '',
    materialName: '',
    dateRange: '', // 默认日期范围
    PageIndex: 1,
    PageSize: 15
});

// 表格数据
const tableData = ref([]);

// 统计数据
const totalProductionQuantity = ref(5);
const totalCompletedQuantity = ref(0);
const totalUncompletedQuantity = ref(5);
const totalWarehouseQuantity = ref(0);

// 分页数据
const total = ref(1);
const currentPage = ref(1);

// 搜索方法（需根据实际API实现）
const search = () => {
    console.log('执行搜索', form.value);
};

// 查询所有方法（需根据实际API实现）
const queryAll = () => {
    console.log('查询所有数据');
};

// 导出方法（需根据实际API实现）
const exportData = () => {
    console.log('执行导出操作');
};

// 打印方法（需根据实际API实现）
const printData = () => {
    console.log('执行打印操作');
};

// 分页切换处理
const handleCurrentChange = (page) => {
    currentPage.value = page;
    console.log('切换到第', page, '页');
};

const MookShow = () => {
    axios.get("https://localhost:7006/api/Process/AllcodesQuser", {
        params: {
            PageIndex: form.PageIndex,
            PageSize: form.PageSize,
            Tu_status: form.trackingNumber,
            Id: form.documentCode,
            Material_code: form.materialCode,
            Tu_Name: form.materialName,
            Production_line: form.productionLine,
            KTime: form.startDate,
            JTime: form.endDate,
        }
    }).then((res) => {
        tableData.value = res.data.data.list;
    })
}

onMounted(() => {
    MookShow()
})
</script>

<style scoped>
.container {
    padding: 10px;
}

.search-form {
    margin-bottom: 10px;
}

.action-buttons {
    margin: 10px 0;
}

.summary-info {
    margin: 10px 0;
    font-size: 14px;
}
</style>